<template>
    <div>
      <div class="tab">
        <router-link tag="div" class="tab-item" to="/welcome"><!-- to表示路径，路径对应组件写在src/router/index.js -->
          <span class="tab-link">欢迎</span>
        </router-link>
        <router-link tag="div" class="tab-item" to="/testCopy">
          <span class="tab-link">文本复制</span>
        </router-link>
        <router-link tag="div" class="tab-item" to="/testCss">
          <span class="tab-link">Css</span>
        </router-link>
        <router-link tag="div" class="tab-item" to="/cache">
          <span class="tab-link">暂存</span>
        </router-link>
      </div>
    </div>
</template>

<script>
export default {
  name: 'tab'
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .tab
    width 100vw
    margin 0 auto
    border 1px solid red
    padding-left 40px
    /*清除浮动*/
    &::after
      content: ''
      clear:both
      display: block
      visibility: hidden
      height:0
  .tab-item
    float left
    margin-right 40px
    font-size: 15px
    line-height 30px
    &.router-link-active
        color: #31c27c
    &:hover
        color: #31c27c
</style>
